﻿@using OSBLE.Models.Courses
@using OSBLEPlus.Logic.Utility
@using OSBLEPlus.Logic.Utility.Lookups
@using OSBLE.Models.Queries
@using OSBLE.Models.Users
@using OSBLE.Models
@using OSBLE.Utility
@{
    UserProfile currentUser = ViewBag.CurrentUser;
    string defaultEvents = string.Join(",", ActivityFeedQuery.GetSocialEvents().Select(e => (int)e));
    if (string.IsNullOrEmpty(ViewBag.Title))
    {
        ViewBag.Title = "Activity Feed";
    }

    var courseUsers = DBHelper.GetAllCourseUsersFromCourseId(ViewBag.ActiveCourse.AbstractCourseID);

    string EnableCustomPostVisibility = ViewBag.EnableCustomPostVisibility;
    bool InterventionsEnabled = ViewBag.InterventionsEnabled ?? false;
}

<script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>
<script type="text/javascript">

    function toggleVisibilityTooltip(visibleIcon){
        var values = visibleIcon.split(',');
        var idName = "";
        if (values.length == 2) { //instructors and tas
            idName = values[0] + "-" + values[1];
        }
        else //all the rest
        {            
            idName = values[0];
            if (idName == "Selected Users") {
                idName = "selected-users";
            }
        }
                
        $("[id^='visibility-tooltip-']").each(function(){            
            $(this).css('display', 'none');
        });

        var selectedId = '#visibility-tooltip-' + idName; 
        $(selectedId).css('display', 'inline');
    }

    var vm;
    $(document).ready(function() {
        
        //alternate dropdown for use in the plugin. datatable doesn't work in chromium renderer for some reason.
        $("#courseUsersList-plugin").change(function () {            
            if ($("#courseUsersList-plugin").prop('selectedIndex') > 0) {
                var fullName = $("#courseUsersList-plugin option:selected").text();
                var userId = $(this).val().split('-');
                
                //add the user to the visible list only if they are not already on it
                if(userId.length > 0 && $("#" + 'selected-user-id-' + userId[userId.length-1]).length == 0) {
                    $("#selected-users-div").append(
                    '<div id="selected-user-id-'+ userId[userId.length-1] +'" class="recipient">' +
                    '<div class="recipient_tools">' +
                    '<a href="#" title="remove this user" onclick="removeUser(' + userId[userId.length-1] + ')" class="deleteIconDiv">' +
                    '<img src="/Content/images/delete_up.png" alt="Remove User Button"></a>' +
                    '</div><a><img src="/Mail/ProfilePicture/' + userId[userId.length-1] +'" class="small_profile_picture" alt="Profile Picture">' + fullName + '</a></div>'
                    );
                }

                var usersCount = updateHiddenUserIdList();                

                if (usersCount == 0) {                    
                    $('#custom-search-clear-selection').css('opacity', '0.65');
                    $('#custom-search-clear-selection').css('cursor', 'not-allowed');
                    $('#NoUsers').css('display', 'inline');
                }
                else
                {
                    $('#custom-search-clear-selection').css('opacity', '1.0');
                    $('#custom-search-clear-selection').css('cursor', 'pointer');
                    $('#NoUsers').css('display', 'none');
                }
            }
        });

        if (!detectBrowser()) {
            $("#custom-user-search-input").css('display', 'none');
            $("#custom-search-clear").css('display', 'none');
            
            $("#courseUsersList-plugin").css('display', 'inline');
        }

        vm = new FeedViewModel("@currentUser.FullName", @currentUser.ID);
        ko.applyBindings(vm);
        vm.RequestUpdate();

        $("#visibility-dropdown").on("change", function () {
            toggleVisibilityTooltip($("#visibility-dropdown option:selected").val());
            if ($("#visibility-dropdown option:selected").text() != "Everyone") {

                if ($("#visibility-dropdown option:selected").text() == "Selected Users...") {
                    toggleCustomGroups('show');
                }
                else
                {
                    toggleCustomGroups('hide');
                    clearSelection();
                }

                $("#btn_post_active").val("Post to: " + $("#visibility-dropdown option:selected").text());
                $("#email_post").text("Email to: " + $("#visibility-dropdown option:selected").text());
            }
            else
            {
                toggleCustomGroups('hide');
                $("#btn_post_active").val("Post to " + $("#data-course-link").text());
                $("#email_post").text("Email to Class");      
                clearSelection();
            }
        });

        $("#custom-user-search-input").on('input', function () {
            var val = this.value;
            if($('#courseUsersList').find('option').filter(function(){

                if (val.length > 0) {
                    $('#custom-search-clear').css('opacity', '1.0');
                    $('#custom-search-clear').css('cursor', 'pointer');
                    $('#custom-search-clear').css('padding', '3px 5px 3px 5px');            
                    $('.icon-state').css('color', '#000');
                }
                else
                {
                        $('#custom-search-clear').css('opacity', '0.65');
                        $('#custom-search-clear').css('cursor', 'not-allowed');  
                        $('#custom-search-clear').css('padding', '2px 5px 2px 5px');            
                        $('.icon-state').css('color', '#aaa');
                }

                return this.value.toUpperCase() === val.toUpperCase();        
            }).length) {                
                var fullName = $("#custom-user-search-input").val();
                var userId = "";

                //get the user id
                $("#courseUsersList > option").each(function(){                    
                    if (this.value.toUpperCase() === fullName.toUpperCase()) {
                        userId = $(this).data("uid").split('-');
                        return false; //exit the foreach
                    }
                });
                
                //add the user to the visible list only if they are not already on it
                if(userId.length > 0 && $("#" + 'selected-user-id-' + userId[userId.length-1]).length == 0) {
                    $("#selected-users-div").append(
                    '<div id="selected-user-id-'+ userId[userId.length-1] +'" class="recipient">' +
                    '<div class="recipient_tools">' +
                    '<a href="#" title="remove this user" onclick="removeUser(' + userId[userId.length-1] + ')" class="deleteIconDiv">' +
                    '<img src="/Content/images/delete_up.png" alt="Remove User Button"></a>' +
                    '</div><a><img src="/Mail/ProfilePicture/' + userId[userId.length-1] +'" class="small_profile_picture" alt="Profile Picture">' + fullName + '</a></div>'
                    );
                }
                //clear the input box
                $("#custom-user-search-input").val('');
                //reset search x
                $('#custom-search-clear').css('opacity', '0.65');
                $('#custom-search-clear').css('cursor', 'not-allowed');  
                $('#custom-search-clear').css('padding', '2px 5px 2px 5px');            
                $('.icon-state').css('color', '#aaa');

                var usersCount = updateHiddenUserIdList();                

                if (usersCount == 0) {                    
                    $('#custom-search-clear-selection').css('opacity', '0.65');
                    $('#custom-search-clear-selection').css('cursor', 'not-allowed');
                    $('#NoUsers').css('display', 'inline');
                }
                else
                {
                    $('#custom-search-clear-selection').css('opacity', '1.0');
                    $('#custom-search-clear-selection').css('cursor', 'pointer');
                    $('#NoUsers').css('display', 'none');
                }
            }
        });

        $('input[id=custom-user-search-input]').keydown(function(e) {
            var code = e.keyCode || e.which;
            if (code === 9) {  //user pressed tab, keep cursor in the input               
                e.preventDefault();                
            }
        });
        
        $(".make_anonymous").on("click", function(){
            if ( $("#make_anonymous").is(":checked")) {                    
                $('#visibility-dropdown').css('opacity', '0.65');
                $('#visibility-dropdown').css('cursor', 'not-allowed');                
                $('#visibility-dropdown').css('background-color', '#ffeeee'); 
                $('#visibility-dropdown').prop('selectedIndex', 0);
                $("#btn_post_active").val("Post to " + $("#data-course-link").text());
                $("#email_post").text("Email to Class");
                $('#visibility-dropdown').prop("disabled", true);
                toggleVisibilityTooltip($("#visibility-dropdown option:selected").val());
                toggleCustomGroups('hide');
                clearSelection();
            }
            else
            {                    
                $('#visibility-dropdown').css('opacity', '1.0');
                $('#visibility-dropdown').css('cursor', 'default');
                $('#visibility-dropdown').prop("disabled", false);
                $('#visibility-dropdown').css('background-color', '#ffffff'); 
            }
        });
    });
</script>

<section data-tab="ActivityFeed">    
    <div id="activity_new_post">        
        @if (ViewBag.ActiveCourse.AbstractRole != null)
        {
            if ((ViewBag.ActiveCourse.AbstractRole.CanGrade == true) || (ViewBag.ActiveCourse.AbstractRole.Anonymized) || ((ViewBag.ActiveCourse.AbstractCourse is Course) && (ViewBag.ActiveCourse.AbstractCourse.AllowDashboardPosts) == true))
            {
                @* Make new post form *@
                <form id="feed-post-form" role="form">
                    <div class="form-group">
                        @{ string defaultText = "Enter new feed post here...\nUse @ and # to tag users or topics"; }
                        <textarea id="feed-post-textbox" class="form-control" rows="4" placeholder="@defaultText"></textarea>
                    </div>
                    <input type="submit" data-bind="click: MakePost" id="btn_post_active" class="btn btn-default" name="post_active" value="Post to @Helpers.CourseTag(ViewBag.ActiveCourse.AbstractCourse)" />

                    @{ var isCourse = DBHelper.IsCourse(ViewBag.ActiveCourse.AbstractCourseID); }
                    
                    @if (isCourse)
                    {
                        @Html.Label("Post Visibility: ", new { id = "visibilty-label" })
                        
                        List<SelectListItem> listItems = new List<SelectListItem>();
                        listItems.Add(new SelectListItem
                             {
                                 Text = "Everyone",
                                 Value = "class",
                                 Selected = true
                             });
                        if (ViewBag.CanGrade)
	                    {
		                    listItems.Add(new SelectListItem
                            {
                                Text = "My Section(s)",
                                Value = "section"
                            });
	                    }
                        else
                        {
                            listItems.Add(new SelectListItem
                            {
                                Text = "My Section",
                                Value = "section"
                            });
                        } 
                        
                        listItems.Add(new SelectListItem
                             {
                                 Text = "Instructors Only",
                                 Value = "instructors",
                             });
                        listItems.Add(new SelectListItem
                             {
                                 Text = "TAs Only",
                                 Value = "tas"
                             });                        
                        listItems.Add(new SelectListItem
                        {
                            Text = "Instructors and TAs Only",
                            Value = "instructors,tas"
                        });

                        if (EnableCustomPostVisibility == "true")
                        {
                            listItems.Add(new SelectListItem
                            {
                                Text = "Selected Users...",
                                Value = "Selected Users"
                            });
                        }
                        
                        @Html.DropDownList("visibility-dropdown", listItems, null, new { @class = "visibility-dropdown" })                         
                        
                        @Helpers.CreateToolTip(ToolTips.VisibilityEveryone,          "visibility-tooltip-class",             "display: inline;",    "glyphicon-globe",      "19px")
                        @Helpers.CreateToolTip(ToolTips.VisibilitySection,           "visibility-tooltip-section",           "display: none;",      "glyphicon-th-list",    "19px")
                        @Helpers.CreateToolTip(ToolTips.VisibilityInstructors,       "visibility-tooltip-instructors",       "display: none;",      "glyphicon-education",  "19px")
                        @Helpers.CreateToolTip(ToolTips.VisibilityTAs,               "visibility-tooltip-tas",               "display: none;",      "glyphicon-education",  "19px")
                        @Helpers.CreateToolTip(ToolTips.VisibilityInstructorsAndTAs, "visibility-tooltip-instructors-tas",   "display: none;",      "glyphicon-education",  "19px")                                                
                        @Helpers.CreateToolTip(ToolTips.VisibilitySelectedUsers,     "visibility-tooltip-selected-users",    "display: none;",      "glyphicon-user",       "19px")
                        
                    }

                    @if (ViewBag.IsInstructor || ViewBag.CanGrade)
                    {
                        @*<input type="submit" id="btn_post_all" class="btn btn-default" name="post_all" value="Post to All Courses I Teach" onclick="return confirm('Post this message to all your taught courses?');" />*@
                        <label class="checkbox-inline"><input type="checkbox" value="True" name="send_email" /><span id="email_post">Email to Class</span></label>
                        <input type="hidden" id="can-grade" value="true" />
                    }
                    
                    <label class="checkbox-inline"><input type="checkbox" value="True" name="make_anonymous" class="make_anonymous" id="make_anonymous" /><span class="make_anonymous">Post Anonymously</span></label>
                    @Helpers.CreateToolTip(ToolTips.AnonymousPost, "anonymous-post", "display: inline;", "glyphicon-info-sign", "19px")
                    @*
                        if (ViewBag.IsLeader)
                        {
                        <label class="checkbox-inline"><input type="checkbox" value="True" name="send_email" /> Email to Community</label>
                        }*@
                    <input type="hidden" id="enable-pm" value="@EnableCustomPostVisibility" />
                </form>
            }
        }
    </div>
    <div id="custom-visiblity-selection">
        <div class="panel panel-default custom-selection">
            <div class="panel-heading">
                @Html.Label("Select Users: ") 

                <input list="courseUsersList" id="custom-user-search-input" class="main-dropdown" placeholder="Search by Name...">
                <datalist id="courseUsersList">
                    @foreach (var user in courseUsers)
                    {
                        if (currentUser.ID != user.ID) //don't add the current user to the list, self is always included!
                        {
                            <option data-uid="user-profile-id-@user.ID" value="@user.FullName"></option>
                        }
                    }
                </datalist>
                <input type="hidden" name="selected-user" id="custom-user-search-input-hidden"><button id="custom-search-clear" class="main-dropdown-button" onclick="clearFilter()"><span class="glyphicon glyphicon-remove icon-state"></span></button>

                @* ALTERNATE dropdown - this is show in the plugin because the chromium browser doesn't properly handle the datalist *@
                <select id="courseUsersList-plugin" class="main-dropdown" style="display: none;">
                    <option value="0">Select User to Add...</option>
                    @foreach (var user in courseUsers)
                    {
                        if (currentUser.ID != user.ID) //don't add the current user to the list, self is always included!
                        {
                            <option value="user-profile-id-@user.ID">@user.FullName</option>
                        }
                    }
                </select>
                
                <button id="custom-search-clear-selection" type="button" class="btn btn-secondary" onclick="clearSelection()">Clear Selection</button>
            </div>
            <div class="panel-body" id="selected-users-div">
                <div id="NoUsers" class="recipient-default" style="display:inline">
                    <a> << No Users Selected >> </a>
                </div>
                <input type="hidden" id="current-user-id" value="@currentUser.ID" />
                <input type="hidden" id="custom-visibility-selection-id-list" name="custom-visibility-selection-id-list" value="@currentUser.ID" />
            </div>
        </div>
    </div>

    <div id="filters">
        @Helpers.ToggleButtonHeader("Filters & Search", "#activity-feed-filters", "", false)
        <form role="form" id="activity-feed-filters" style="display: none">

            @* Search by Keyword *@
            <div id="keywordSection" class="form-group">
                <button id="feedSearchIcon" for="feedSearchInput" onclick="vm.RequestUpdate()"><span class="glyphicon glyphicon-search"></span></button>
                <input id="feedSearchInput" type="text" data-bind="textInput: keywords" class="form-control" autocomplete="off" placeholder="Search by keyword..." />
            </div>

            @* Event Type Checkboxes *@
            <div id="filter-type" class="form-group">
                @foreach (EventType e in ActivityFeedQuery.GetNecessaryEvents())
                {
                    <div class="checkbox filter-type-option">
                        <label>
                            @Html.CheckBox("event_" + e.ToString(), String.CompareOrdinal(ActivityFeedQuery.GetCookies(e), "True") == 0, new
                            {
                                id = "event_" + ((int)e).ToString(),
                                @class = "event_checkbox",
                                data_type = ((int)e),
                                onchange = "vm.RequestUpdate()"
                            })
                            @Helpers.GetOptionNameOfEventType(e)
                        </label>
                    </div>
                }
                @* This allows the parent div to properly "contain" all the checkboxes *@
                <div style="clear: both"></div>
            </div>

        </form>
    </div>
    
    @if (!ViewBag.IsInstructor && !ViewBag.CanGrade && InterventionsEnabled)
    { 
        @Html.Partial("~/Views/Intervention/_EmbeddedSuggestionsWindow.cshtml")          
    }

    @* This is a message displayed while the feed is loading posts *@
    <div id="loadingMsg" class="message">
        @Helpers.LoadingSmall() Loading Posts...
    </div>

    @* Feed is inserted here *@
    <div id="dp_posts" class="panel-group">
        @Html.Partial("Feed/_Feed")
    </div>  
     
</section>

<div id="visibility-dialog" title="Post Visibility:" hidden="hidden"></div>
@* input to show or hide the alternate dropown list *@
<input type="hidden" id="visibility-browser-check" value="false" />

<script type="text/javascript">
</script>